import React, { useEffect, useState } from 'react'
import '../../style/kuangjia.css'
import '../../style/main.css'
import '../../style/highlight.css'
import RowSongList from '../songLists/RowsongList'
import { Link } from 'react-router-dom'
const Highlights = () => {
  const [loading, setLoading] = useState(true)
  const [newMusicdata, setNewMusicdata] = useState([])
  useEffect(() => {
    fetch('http://localhost:3000/playlist/track/all?id=3779629&limit=50&offset=1')
      .then((Response) => Response.json())
      .then((data) => {
        setNewMusicdata(data.songs)
      })
      .catch((error) => {
        console.error('Error fetching playlist data:', error);
      });
  }, [])

  const [wangluohot, setWangluohotdata] = useState([])
  useEffect(() => {
    fetch('http://localhost:3000/playlist/track/all?id=6723173524&limit=50&offset=1')
      .then((Response) => Response.json())
      .then((data) => {
        setWangluohotdata(data.songs)
      })
      .catch((error) => {
        console.error('Error fetching playlist data:', error);
      });
  }, [])

  const [rapdata, setRapdata] = useState([])
  useEffect(() => {
    fetch('http://localhost:3000/playlist/track/all?id=991319590&limit=50&offset=1')
      .then((Response) => Response.json())
      .then((data) => {
        setRapdata(data.songs)
        setLoading(false)
      })
      .catch((error) => {
        console.error('Error fetching playlist data:', error);
      });
  }, [])

  return (
    <div className="playhallpage">
      {loading ? (
        <div className="loadingPage">
          <div className="loadcomponents">
            <div className='loader2'></div>
            <div className='loader1'></div>
          </div>
        </div>
      ) : (
        <>
          <p className="titl2">官方歌单</p>
          <div className="guanfang">
            <ul className='guanfangcontainer'>

              <Link to={"608858041"}><li className="card3">
                <div className='mingzi'>华语</div>
              </li></Link>
              <Link to={`2809513713`}>
                <li className="card3">
                  <div className='mingzi'>欧美</div>
                </li>
              </Link>
              <Link to={`745956260`}>
                <li className="card3">
                  <div className='mingzi'>韩语</div>
                </li>
              </Link>
              <Link to={`5059644681`}>
                <li className="card3">
                  <div className='mingzi'>日语</div>
                </li>
              </Link>
              <Link to={`2237551001`}>
                <li className="card3">
                  <div className='mingzi'>粤语</div>
                </li>
              </Link>
              <Link to={`2215265891`}>
                <li className="card3">
                  <div className='mingzi'>另类|独立</div>
                </li>
              </Link>
            </ul>
          </div>
          <p className="titl2">最新音乐</p>
          <RowSongList songList={newMusicdata} />
          <p className="titl2">网络热歌</p>
          <RowSongList songList={wangluohot} />
          <p className="titl2">云音乐说唱榜</p>
          <RowSongList songList={rapdata} />
        </>
      )}
    </div>
  )
}

export default Highlights
